<template>
<div class="intervalBox">
  <div class="interval_row flex">
    <div style="border: none" class="date flex j-content">区间天数
    </div>
    <div class="remark flex j-content ">
      区间描述
    </div>
  </div>
  <div v-for="item in dataList" class="interval_row flex">
    <div class="date">
      <input v-model="item.days"  @change="setIntervalList" type="number">
    </div>
    <div class="remark flex a-item j-content">
      {{ item.remark }}
    </div>
  </div>
  <div class="flex ">
    <el-button style="margin-top: 10px" @click="emit" type="success">
      确定
    </el-button>
  </div>
</div>
</template>

<script>

export default {
  name: 'interval',
  props:{
    intervalList:{
      type:Array,
      default:()=>[]
    },
  },
  data(){
    return {
      dataList:[
        {
          seq: 1,
          days:1,
          remark:'1至1天',
          startValue:1,
          endValue:1
        }
      ]
    }
  },
  created() {
    this.dataList = this.intervalList?JSON.parse(JSON.stringify(this.intervalList)):[{
        seq: 1,
        days:1,
        remark:'1至1天',
        startValue:1,
        endValue:1
    }]
    this.setIntervalList()
  },
  methods:{
    setIntervalList(){
      //过滤出有数据的值
      const list = this.dataList.filter(item=>{
        const val = item.days >> 0
        if (val>0){
          return val
        }
      })
      const dataList = []
      const end = list.reduce((pre,cur,index)=>{
        const days = Number(cur.days)
        const startValue=pre+1
        const endValue=pre+days
        const remark=`${startValue}至${endValue}天`

        dataList.push({
          seq:index+1,
          days:days,
          startValue,
          endValue,
          remark,
        })
        return endValue
      },0)
      this.dataList = dataList
      this.dataList.push({
        seq:this.dataList.length+1,
        days:'',
        remark:`大于${end+1}天`,
        startValue:end+1,
        endValue:""
      })
    },
    addInterval(){
      this.dataList.push({days:null,remark: ''})
    },
    emit(){
      this.$emit('upInterval',this.dataList)
    }
  }

}
</script>

<style lang="scss" scoped>
.intervalBox{
  .interval_row{
    height: 30px;
    .date{
      width:30%;
      height: 100%;
      border: rgba(205,205,205,.5) 1px solid;
      input{
        border: none;
        width: 100%;
        height: 100%;
        &:focus { outline: none};
        text-align: center;
      }

    }
    .remark{
      height: 100%;
      width: 70%
    }
  }
}
</style>
